<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#divaa{
				width: 100px;
				height: 50px;
				background-color: aqua;
			}
			#divbb{
				width: 60px;
				height: 30px;
				background-color: brown;
			}
			#divcc{
				width: 40px;
				height: 20px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- 2.新制作一个页面，要求：
		       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
		       2.2 分别实现 id,类，标签三种方式查找以上元素 -->
			   <div id="divaa">aa</div>
			   <div id="divbb" class="div_class">bb</div>
			   <div id="divcc">cc</div>
			   <h1 id="h1_id" class="h1_class">标题哈喽</h1>
			   <p id="pid">我</p>
			   <p class="p_class">是</p>
			   <p>p</p>
			   <p>标</p>
			   <p>签</p>
			   <img id="img_id" class="img_class" src="./QQ图片20211023153520.jpg" style="width: 100px;" height="100px" >
			
			   <ul id="ul_id" class="ul_class">
			   	<li>my</li>
				<li>lie</li>
			   </ul>
			   <button type="button" onclick="czdiv();">查找div</button>
			   <button type="button" onclick="czbiao();">查找标题</button>
			   <button type="button" onclick="czp();">查找p标签</button>
			   <button type="button" onclick="cztu();">查找图片</button>
			   <button type="button" onclick="czlie();">查找列表</button>
	</body>
	<script type="text/javascript">
		function czdiv (){
			console.log(document.getElementById('divaa'));
			console.log(document.getElementsByClassName('div_class'));
			console.log(document.getElementsByTagName('div'));
		}
		function czbiao (){
			console.log(document.getElementById('h1_id'));
			console.log(document.getElementsByClassName('h1_class'));
			console.log(document.getElementsByTagName('h1'));
		}
		function czp (){
			console.log(document.getElementById('pid'));
			console.log(document.getElementsByClassName('p_class'));
			console.log(document.getElementsByTagName('p'));
		}
		function cztu (){
			console.log(document.getElementById('img_id'));
			console.log(document.getElementsByClassName('img_class'));
			console.log(document.getElementsByTagName('img'));
		}
		function czlie (){
			console.log(document.getElementById('ul_id'));
			console.log(document.getElementsByClassName('ul_class'));
			console.log(document.getElementsByTagName('ul'));
		}
	</script>
</html>
